import './load.less';

let $loadingWaver;
let $loadingBanner;
let timeOut = 0;

function loadingWaver(text, callback, time, delayTime, hasMask) {
    // text：文字， callback：回调， time：显示时间
    window.clearTimeout(timeOut);
    timeOut = setTimeout(() => {
        if (!$loadingWaver) {
            $loadingWaver = $(`
                <div>
                    <div class='wptMask${hasMask ? '' : ' hide'}' style='opacity: 0.4;'></div>
                    <div class="loadingWaver">
                        
                        <div class="icon"><div></div><div></div><div></div></div>
                        <div class="title"></div>
                    </div>
                </div>
            `);
            $loadingWaver.appendTo('body');
        }
        if (hasMask) {
            $loadingWaver.find('.wptMask').removeClass('hide');
        } else {
            $loadingWaver.find('.wptMask').addClass('hide');
        }

        $loadingWaver.find('.title').html(text || '');
        if (text) {
            $loadingWaver.find('.icon').addClass('hasText');
        } else {
            $loadingWaver.find('.icon').removeClass('hasText');
        }
        $loadingWaver.show();
        time
            && setTimeout(() => {
                $loadingWaver.hide();
                callback && callback();
            }, time);
    }, delayTime || 0);
}

loadingWaver.close = function close() {
    window.clearTimeout(timeOut);
    $loadingWaver && $loadingWaver.hide();
};

function loadingWaverDelay(text, callback, time) {
    loadingWaver(text, callback, time, 1000);
}

function loadingBanner() {
    if (!$loadingBanner) {
        $loadingBanner = $(
            '<div class="loadingBanner"><div class="icon"><div></div><div></div><div></div></div></div>'
        );
    }
    return $loadingBanner;
}

export default {
    loadingWaverDelay,
    loadingWaver,
    loadingBanner,
};
